<template>
  <div class="m-25 mt-65">
    <div class="normal-box-mod">
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <div class="decorate-square"></div>
          <h2>分类记录</h2>
        </div>
      </div>
      <div class="normal-box-bd">
           <div class="normal-list-page-mod">
          <div class="normal-list-page-bd">
            <Table
              border
              :loading="list.loading"
              :columns="list.columns"
              :data="list.tableData"
              @on-selection-change="selectionChange"
            >
              <template slot-scope="{ row, index }" slot="isFace">
                   <Button type="primary" size="small" v-if="row.isFace==0">人脸识别陌生用户</Button>
                    <Button type="primary" size="small" v-if="row.isFace==1">人脸识别用户</Button>
                     <Button type="primary" size="small" v-if="row.isFace==2">二维码用户</Button>
              </template>
               <template slot-scope="{ row, index }" slot="video">
                   <Button type="primary" size="small" @click="showVideo(row.video)">查看视频</Button>
              </template>
            </Table>
          </div>
          <div class="normal-list-page-ft clearfix">
            <Page
              class="fr"
              :total="queryData.totalRecord"
              :page-size="queryData.pageSize"
              :current="queryData.page"
              @on-change="changePage"
              @on-page-size-change="onPageSizeChange"
              show-elevator
              show-total
              show-sizer
            ></Page>
          </div>
        </div>
        <Modal v-model="modal.mallAdvertising.bigPicVisible" width="1000px">
          <img
            :src="modal.mallAdvertising.bigPicUrl"
            style="width: 50%; height: 50%; display: block; margin: 0 auto"
          />
          <div slot="footer" />
        </Modal>
       <Modal v-model="modal.video.isShow" width="600px">
         <div style="text-align:center;width: 500px;height: 600px;margin:30px auto" align="center">
            <iframe height=498 width=510 :src='modal.video.url' frameborder=0 ></iframe>
        </div>
          <div slot="footer" />
        </Modal>
      </div>
    </div>
  </div>
</template>
<script>
import VideoApi from '@/api/sorting/video.js'
import { Message } from 'iview'
import Uploadoss from '@/components/uploadoss'
import uploadImage from '@/components/upload-image/upload-image'
export default {
  components: {
    uploadImage,
    Uploadoss
  },
  name: 'user',
  data () {
    return {
      // 列表
      modal: {
        mallAdvertising: {
          isShow: false,
          bigPicVisible: false,
          loading: true,
          bigPicUrl: '',
          type: 'create', // create 新建，update 修改
          title: '新建',
          rules: {
            title: [
              {
                required: true,
                message: '请填写标题',
                trigger: 'blur'
              }
            ],
            content: [
              {
                required: true,
                message: '请填写内容',
                trigger: 'blur'
              }
            ]
          },
          formData: {}
        },
        video: {
          isShow: false,
          url: ''
        }
      },
      bigPicVisible: false,
      bigPicUrl: '',
      list: {
        loading: false,
        selections: [],
        // 列表展示数据
        tableData: [],
        // 表格表头
        columns: [
          {
            type: 'selection',
            width: 50,
            align: 'center'
          },
          /** 开始自动生成 */
          { title: 'id', key: 'id', align: 'center', width: '60px' },
          { title: '机器编码', key: 'machineCode', align: 'center', width: '150px' },
          { title: '机器名', key: 'machineName', align: 'center', width: '130px' },

          { title: '是否人脸用户', key: 'isFace ', align: 'center', slot: 'isFace', width: 150 },
          {
            title: '人脸照片',
            key: 'picture',
            align: 'center',
            width: 150,
            render: (h, params) => {
              return h('img', {
                attrs: {
                  src: params.row.picture
                },
                style: {
                  width: '100px'
                  //   height: "35px",
                },
                on: {
                  click: () => {
                    this.showBigPic(params.row.picture) // 此处再用一个方法，建一个modal把图放大。
                  }
                }
              })
            }
          },
          { title: '用户卡号', key: 'cardNo', align: 'center', width: '100px' },
          { title: '用户姓名', key: 'userName', align: 'center', width: '100px' },
          {
            title: '住址（楼栋门牌号）',
            key: 'addres',
            align: 'center'
            // width: '140px'
          },
          {
            title: '垃圾重量',
            key: 'weight',
            align: 'center',
            width: '100px'
          },
          {
            title: '投放积分',
            key: 'integral',
            align: 'center',
            width: '100px'
          },
          {
            title: '记录时间',
            key: 'insertTime',
            align: 'center',
            width: '150px'
          },
          {
            title: '分类投放视频',
            key: 'video',
            align: 'center',
            width: '150px',
            slot: 'video'
          }

        ]
      },
      // 页面查询数据
      queryData: {
        limit: 10,
        page: 1,
        totalRecord: 0
      }
    }
  },
  methods: {
    // 图片的校验
    calcImg () {
      let imgUrl = this.modal.mallAdvertising.formData.uploadList.map((v) => {
        if (v.length < 1) return v
        v = v.response.res.requestUrls[0]
        return v
      })
      this.modal.mallAdvertising.formData.imgUrl = imgUrl[0]
      console.log(this.modal.mallAdvertising.formData.imgUrl)
    },
    // 显示新建弹窗
    showCreateModal () {
      this.modal.mallAdvertising.type = 'create'
      this.modal.mallAdvertising.title = '新建'
      this.modal.mallAdvertising.formData = {}
      this.modal.mallAdvertising.isShow = true
    },

    showBigPic (item) {
      this.modal.mallAdvertising.bigPicVisible = true
      this.modal.mallAdvertising.bigPicUrl = item
    },
    showVideo (item) {
      this.modal.video.isShow = true
      this.modal.video.url = item
    },
    // 获取列表
    getTableData () {
      const that = this
      that.queryData.totalRecord = undefined
      VideoApi
        .getPageList(that.queryData)
        .then((res) => {
          that.list.tableData = res.data.list
          that.queryData.totalRecord = res.data.totalRecord
          that.queryData.page = res.data.pageNum
          that.queryData.limit = res.data.pageSize
        })
        .catch((error) => {
          Message.error(error)
        })
    },
    postData () {
      const that = this
      that.$refs['systemFrom'].validate((valid) => {
        if (valid) {
          if (!that.modal.mallAdvertising.formData.id) {
            // 新建
            notifyApi
              .add(that.modal.mallAdvertising.formData)
              .then((res) => {
                that.modal.mallAdvertising.loading = false
                if (!res.code) {
                  that.modal.mallAdvertising.isShow = false
                  that.getTableData()
                  that.$Notice.success({
                    title: '保存成功!'
                  })
                } else {
                  that.modal.mallAdvertising.isShow = true
                  that.$Notice.error({
                    title: res.message
                  })
                }
              })
              .catch((error) => {
                Message.error(error)
              })
          } else {
            // 修改
            that.modal.mallAdvertising.formData.startTime = global.time(
              that.modal.mallAdvertising.formData.startTime
            )
            that.modal.mallAdvertising.formData.endTime = global.time(
              that.modal.mallAdvertising.formData.endTime
            )
            MallAdvertisingApi.update(
              that.modal.mallAdvertising.formData.id,
              that.modal.mallAdvertising.formData
            )
              .then((res) => {
                that.modal.mallAdvertising.loading = false
                console.log(that.modal.mallAdvertising.formData)
                if (!res.code) {
                  that.modal.mallAdvertising.isShow = false
                  that.getTableData()
                  that.$Notice.success({
                    title: '保存成功!'
                  })
                } else {
                  that.modal.mallAdvertising.isShow = true
                  that.$Notice.error({
                    title: res.message
                  })
                }
              })
              .catch((error) => {
                Message.error(error)
              })
          }
        } else {
          that.modal.mallAdvertising.loading = false
          that.$nextTick(() => {
            that.modal.mallAdvertising.loading = true
          })
        }
      })
    },

    // 删除
    delData (ids) {
      if (!ids.length) {
        return
      }
      this.$Modal.confirm({
        title: '确认删除',
        content:
          '<p>您确认删除id为 <strong>' +
          ids.toString() +
          '</strong> 的记录吗?</p><p>删除后将无法撤销，请谨慎操作！</p>',
        loading: true,
        onOk: () => {
          BBSApi.del({
            ids: ids
          }).then((res) => {
            this.$Modal.remove()
            if (!res.code) {
              this.$Notice.success({
                title: '删除成功'
              })
              this.queryData.page = 1
              this.getTableData()
            } else {
              this.$Notice.error({
                title: res.message
              })
            }
          })
        }
      })
    },

    // 排量删除
    batchDel () {
      let ids = []
      this.list.selections.forEach((element) => {
        ids.push(element.pid)
      })
      if (!ids.length) {
        this.$Message.error({
          content: '请先选择要删除的项！',
          duration: 3
        })
      }
      //   console.log('ids', this.list.selections)
      this.delData(ids)
    },
    // 查询
    inQuire () {
      const that = this
      that.getTableData()
    },
    // 全选，不全选
    selectionChange (args) {
      this.list.selections = args
    },

    // 每页显示记录数变更
    onPageSizeChange (pageSize) {
      this.queryData.limit = pageSize
      this.getTableData()
    },

    // 换页
    changePage (page) {
      this.queryData.page = page
      this.getTableData()
    }
  },

  created () {
    this.getTableData()
  }
}
</script>
